<template>
  <div class="orders-manage">
    <t-card title="订单管理">
      <!-- 搜索区域 -->
      <div class="search-area">
        <t-input v-model="searchKeyword" placeholder="请输入订单号/名称/账号搜索" clearable style="width: 300px">
          <template #suffix>
            <t-icon name="search" @click="handleSearch" />
          </template>
        </t-input>
        <t-select v-model="statusFilter" placeholder="支付状态筛选" clearable style="width: 150px">
          <t-option key="all" label="全部" value="all" />
          <t-option key="paid" label="已支付" value="paid" />
          <t-option key="unpaid" label="未支付" value="unpaid" />
          <t-option key="refunded" label="已退款" value="refunded" />
        </t-select>
        <t-button theme="primary" @click="handleSearch">搜索</t-button>
        <t-button theme="default" @click="handleReset">重置</t-button>
      </div>

      <t-table :data="slicedData" :columns="columns" :hover="true" :loading="false" :pagination="pagination"
        @page-change="onPageChange" row-key="oid">
        <template #paymentStatus="{ row }">
          <t-tag :theme="getPaymentStatusTheme(row.paymentStatus)">
            {{ row.paymentStatus }}
          </t-tag>
        </template>
        <template #amount="{ row }">
          <span>¥{{ row.amount.toFixed(2) }}</span>
        </template>
        <template #op="{ row }">
          <t-space>
            <t-button variant="text" theme="primary" @click="viewOrderDetail(row)">
              查看详情
            </t-button>
          </t-space>
        </template>
      </t-table>
    </t-card>
  </div>
</template>

<script setup lang="ts">
  import { ref, computed } from 'vue'
  import { 
    Card as TCard, 
    Input as TInput, 
    Button as TButton, 
    Icon as TIcon,
    Table as TTable,
    Tag as TTag,
    Space as TSpace,
    Select as TSelect,
    Option as TOption,
    MessagePlugin
  } from 'tdesign-vue-next'

  // 定义订单数据类型
  interface OrderData {
    oid: string;
    createdAt: string;
    name: string;
    amount: number;
    paymentStatus: '已支付' | '未支付' | '已退款';
    acount: string;
    phone: string;
  }

  // 搜索关键词
  const searchKeyword = ref('')
  
  // 状态筛选
  const statusFilter = ref<'all' | 'paid' | 'unpaid' | 'refunded'>('all')

  // 模拟订单数据
  const orderData = ref<OrderData[]>([
    {
      oid: 'ORD20240101001',
      createdAt: '2024-01-01 10:15:30',
      name: '高级商务套餐',
      amount: 1299.00,
      paymentStatus: '已支付',
      acount: 'zhangsan',
      phone: '13800138000'
    },
    {
      oid: 'ORD20240102002',
      createdAt: '2024-01-02 14:25:10',
      name: '标准服务包',
      amount: 699.50,
      paymentStatus: '已支付',
      acount: 'lisi',
      phone: '13800138001'
    },
    {
      oid: 'ORD20240103003',
      createdAt: '2024-01-03 09:05:22',
      name: '基础咨询服务',
      amount: 299.00,
      paymentStatus: '未支付',
      acount: 'wangwu',
      phone: '13800138002'
    },
    {
      oid: 'ORD20240104004',
      createdAt: '2024-01-04 16:42:15',
      name: '高级定制方案',
      amount: 2599.00,
      paymentStatus: '已退款',
      acount: 'zhaoliu',
      phone: '13800138003'
    },
    {
      oid: 'ORD20240105005',
      createdAt: '2024-01-05 11:30:45',
      name: '年度会员服务',
      amount: 3999.00,
      paymentStatus: '已支付',
      acount: 'qianqi',
      phone: '13800138004'
    },
    {
      oid: 'ORD20240106006',
      createdAt: '2024-01-06 08:20:33',
      name: '专业技术支持',
      amount: 1599.00,
      paymentStatus: '未支付',
      acount: 'sunba',
      phone: '13800138005'
    },
    {
      oid: 'ORD20240107007',
      createdAt: '2024-01-07 13:15:50',
      name: '数据分析报告',
      amount: 899.00,
      paymentStatus: '已支付',
      acount: 'zhangsan',
      phone: '13800138000'
    }
  ])

  // 表格列配置
  const columns = [
    { colKey: 'oid', title: '订单ID', width: 150 },
    { colKey: 'createdAt', title: '创建时间', width: 180 },
    { colKey: 'name', title: '订单名称', width: 150 },
    { colKey: 'amount', title: '金额', width: 120 },
    { colKey: 'paymentStatus', title: '支付状态', width: 120 },
    { colKey: 'acount', title: '用户账号', width: 120 },
    { colKey: 'phone', title: '用户手机号', width: 150 },
    { colKey: 'op', title: '操作', width: 120 }
  ]

  // 根据关键词和状态过滤数据
  const filteredData = computed(() => {
    let result = orderData.value
    
    // 关键词筛选
    if (searchKeyword.value) {
      const keyword = searchKeyword.value.toLowerCase()
      result = result.filter(order =>
        order.oid.toLowerCase().includes(keyword) ||
        order.name.toLowerCase().includes(keyword) ||
        order.acount.toLowerCase().includes(keyword)
      )
    }
    
    // 状态筛选
    if (statusFilter.value !== 'all') {
      let status: '已支付' | '未支付' | '已退款'
      
      switch (statusFilter.value) {
        case 'paid':
          status = '已支付'
          break
        case 'unpaid':
          status = '未支付'
          break
        case 'refunded':
          status = '已退款'
          break
        default:
          return result
      }
      
      result = result.filter(order => order.paymentStatus === status)
    }
    
    return result
  })

  // 分页配置
  const pagination = ref({
    current: 1,
    pageSize: 10,
    total: computed(() => filteredData.value.length),
    showJumper: true,
    showPageSize: true
  })

  // 计算当前页数据
  const slicedData = computed(() => {
    const start = (pagination.value.current - 1) * pagination.value.pageSize
    const end = start + pagination.value.pageSize
    return filteredData.value.slice(start, end)
  })

  // 搜索处理
  const handleSearch = () => {
    pagination.value.current = 1 // 搜索时重置到第一页
  }

  // 重置搜索
  const handleReset = () => {
    searchKeyword.value = ''
    statusFilter.value = 'all'
    pagination.value.current = 1
  }

  // 页码改变处理
  const onPageChange = (current: number) => {
    pagination.value.current = current
  }

  // 获取支付状态对应的主题色
  const getPaymentStatusTheme = (status: string) => {
    switch (status) {
      case '已支付':
        return 'success'
      case '未支付':
        return 'warning'
      case '已退款':
        return 'danger'
      default:
        return 'default'
    }
  }

  // 查看订单详情
  const viewOrderDetail = (order: OrderData) => {
    MessagePlugin.info(`查看订单详情：${order.oid}`)
    // 这里可以实现查看订单详情的逻辑，例如打开一个弹窗显示订单详细信息
  }
</script>

<style scoped>
  .orders-manage {
    padding: 0;
  }
  
  .search-area {
    margin-bottom: 16px;
    display: flex;
    gap: 12px;
    align-items: center;
  }

  .t-button {
    margin-left: 8px;
  }
</style>